<template>
    <div class="Article">
        <Header></Header>
        <div id="Article-pc">
            <div class="top1">
                <div class="top-left">
                    <img src="@/assets/Article1.jpg">
                    <!-- <img :src="message.imgSrc"> -->
                </div>
                <div class="top-middle">
                    <router-link 
                    class="top-middle-top"
                    tag="div"
                    font-size="20px"
                    :to="{path:'/Attention',query:{address:message.address}}"
                    >
                    {{message.author}}
                    </router-link>
                    <div class="top-middle-bottom">
                        {{message.time}}
                    </div>
                </div>
                <div class="top-right">
                    <div class="top-right-middle">
                        <button class="top-right-btn">+关注</button>
                    </div>
                </div>
            </div>
            <div class="left">
                {{message.content}}
                <!-- 不确定具体展示格式，此处先略过 -->
                <div class="top5">
                    作品展示：
                </div>
                <div class="box">
                    <div class="box-top">
                        <div class="box-top-left">
                            研究
                        </div>
                        <div class="box-top-right">
                            <button>130</button>
                            <button>克隆</button>
                            <button>收起</button>
                        </div>
                    </div>
                    <div class="box-middle">
                        <br><br><br><br><br><br><br><br><br>
                        您需要登录才能查看，<a href="#">点击登录</a>。
                    </div>
                </div>
                <!-- 下载部分同样略过 -->
                <div class="small-box">
                    <div class="small-box-top-left">
                            factor_dict-一梦春秋.pkl ( 8.34 M )
                    </div>
                    <div class="small-box-top-right">
                            <button>83</button>
                            <button>下载附件</button>
                    </div>
                </div>
                <div class="btn">
                    <Tag2 
                    v-for="item in message.tags"
                    :key="item" 
                    :content="item">
                    </Tag2>
                </div>
                <div class="bottom">
                    <!-- 向Disscusion传递对应评论特征值 -->
                    <Discussion></Discussion>
                </div>
            </div>
            <div class="right">
                <div class="icon">
                    <div class="icon1">
                        <img src="@/assets/Article10.jpg">
                    </div>
                    <div class="text">
                        点赞 66
                    </div>
                    <div class="icon2">
                        <img src="@/assets/Article11.jpg">
                    </div>
                    <div class="icon2">
                        <img src="@/assets/Article12.jpg">
                    </div>
                    <div class="icon2">
                        <img src="@/assets/Article13.jpg">
                    </div>
                    <div class="icon2">
                        <img src="@/assets/Article14.jpg">
                    </div>
                </div>
            </div>
        </div>
        <div id="Article-mobile">
            <div class="mobile-top1">
                {{message.title}}
            </div>
            <div class="mobile-top2">
                <p>
                    <router-link
                    :to="{path: '/Attention',query:{address: message.address}}">
                    {{message.author}}
                    </router-link>
                    {{message.time}}
                </p>
                <p>
                    回复{{message.review}}      浏览{{message.view}}      ❤{{message.like}}
                </p>
            </div>
            <div class="mobile-top4">
                {{message.content}}
            </div>
            <!-- 同样原因，以后再说 -->
            <div class="mobile-top5">
                作品展示：
            </div>
            <div class="mobile-box1">
                <div class="mobile-box">
                    <div class="mobile-box-top">
                        研究
                    </div>
                    <div class="mobile-box-middle">
                        <button class="mobile-btn">^收起</button>
                        <button class="mobile-btn1">克隆</button>
                        <button class="mobile-btn">136</button>
                    </div>
                    <br><br><br><br><br><br><br><br>
                    <div class="mobile-box-bottom">
                        您需要登录才能查看，<a href="#">点击登录</a>
                    </div>
                </div>
            </div>
            <div class="mobile-img">
                <img class="mobile-img1" src="@/assets/Article-mobile1.jpg">
            </div>
            <div class="bottom">
                <Discussion></Discussion>
            </div>
        </div>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Discussion from '@/components/cards/Discussion_Card.vue'
import Tag2 from '@/components/tags/Tag2.vue'
export default {
    name: 'Article',
    props: ['content'],
    data(){
        return{
            message: {
                id: 1,
                title : '让量化助力实盘 – 中泰极速量化交易系统上线',
                content: '每月调整一次仓位，股票7成仓位，等市值卖出300etf 如果实盘中是IF的话，股指限制前10%左右的保证金，30%仓位足够覆盖期货头寸的保证金了，其实只用7%左右资金',
                author: ' ☺小秘书',
                address: 'null',
                time: '1个月前',
                view: '56',
                review: '56',
                like: '56',
                top: true,
                elite: true,
                tags: ['研报复现','机器学习'],
                imgSrc: '',
            }
        }
    },
    methods:{

    },
    components:{
        Header,
        Discussion,
        Tag2,  
    }
}
</script>
<style scoped>
@media screen and (min-width:980px){
#Article-mobile{
    display: none;
}
#Article-pc{
    display: block;
    width:100%;
    height: auto;
    padding-top:57px;
    background: white;
    overflow: hidden;
}
.top1{
    width:100%;
    height: 60px;
    padding-left:20%;
    padding-right:20%; 
    border-bottom: 1px solid #e6e6e6;
}
.top1 .top-left{
    float: left;
    width:10%;
    height: 60px;
}
.top1 .top-left img{
    margin-top:6px; 
    width:80%;
    height: 50px;
}
.top1 .top-middle{
    float: left;
    width:75%;
    height: 60px;
}
.top1 .top-middle .top-middle-top{
    height: 30px;
    padding-top:10px;
    font-size: 10px;
    cursor: pointer;
}
.top1 .top-middle .top-middle-bottom{
    font-size: 7px;
    line-height: 30px;
    color: #9e9a9a;
}
.top1 .top-right{
    float: left;
    width:15%;
    height: 60px;
}
.top1 .top-right .top-right-middle{
    height: 30px;
    width: 100%;
    margin-top:15px; 
}
.top1 .top-right .top-right-btn{
    float: right; 
    width:75px;
    height: 30px;
    color: rgb(44, 44, 248);
    border:1px solid rgb(44, 44, 248);
}
.left{
    float: left;
    width:80%;
    height: auto;
    padding-left:20%;
}
.right{
    float: right;
    width:20%;
    height: auto;
    padding-left:3%;
    padding-top:120px;
}
.right .icon{
    position:fixed;
    width:60px;
    height: auto;
}
.right .icon .icon1{
    width:60px;
    height: 60px;
}
.right .icon .icon1 img{
    width:60px;
    height: 60px;
}
.right .icon .text{
    padding-left:5px;
    padding-top:15px;
    font-size:15px;
    color: rgb(243, 125, 29);
}
.right .icon .icon2{
    padding-top:40px;
    padding-left:20px;
    width:25px;
    height: 25px;
}
.right .icon .icon2 img{
    width:25px;
    height: 25px;
}
.right .icon .icon2 img:hover{
    background:  rgb(243, 125, 29);
}
/* .top2{
    float: left;
    width:100%;
    height: 80px;
    font-size: 30px;
    font-family:"KaiTi";
    line-height: 80px;
}
.top3{
    float: left;
    width:100%;
    height: 40px;
    font-size: 20px;
    font-family:"KaiTi";
    line-height: 30px;
}
.top4{
    float: left;
    width:100%;
    height: 80px;
    border-left: 5px solid #e6e6e6;
    padding-top:20px;
}
.top4 p{
    padding-left:10px; 
    font-size:17px;
    line-height: 20px;
    font-family: "KaiTi";
    color: #696565;
} */
.top5{
    float: left;
    width:100%;
    height: 100px;
    padding-top: 40px;
    font-size:25px;
    line-height: 60px;
    font-family: "KaiTi";
}
.box{
    float: left;
    width:100%;
    height: 450px;
    border: 1px solid #c9c6c6;
    margin-bottom:40px; 
}
.box .box-top{
    float: left;
    width:100%;
    height: 50px;
    border-bottom: 1px solid #e6e6e6;
}
.box .box-top .box-top-left{
    float: left;
    width: 20%;
    font-size: 20px;
    line-height: 50px;
    font-family: "KaiTi";
    padding-left:3%;
}
.box .box-top .box-top-right{
    float: right;
    width: 250px;
    margin-top: 10px;
}
.box .box-top .box-top-right button{
    float: right;
    width: 60px;
    height: 30px;
    margin:0 10px 10px 0;
    color: rgb(123, 123, 204);
    border:1px solid rgb(123, 123, 204);
}
.box .box-middle{
    float: left;
    width:100%;
    height: 400px;
    vertical-align:middle;
    text-align:center;    
    font-size: 15px;
    font-family: "KaiTi";
    color: rgb(39, 38, 38)
}
.small-box{
    float: left;
    width: 100% ;
    height: 70px;
    border: 1px solid #c9c6c6;
    margin-bottom:40px; 
}
.small-box .small-box-top-left{
    float: left;
    width: 50%;
    font-size:15px;
    line-height: 70px;
    font-family: "KaiTi";
    padding-left:5%;
}
.small-box .small-box-top-right button{
    float: right;
    width: 75px;
    height: 30px;
    font-family: "KaiTi";
    margin:20px 1% 0 0;
    vertical-align:middle; 
    text-align:center;
    color: rgb(123, 123, 204);
    border:1px solid rgb(123, 123, 204);
}
.btn{
    float: left;
    width:100%;
    height: 80px;
    padding-top:10px;
    font-size: 15px;
    padding-bottom: 40px;
}
.btn button{
    width:10%;
    height: 30px;
    border-radius: 20px;
    background: rgb(123, 123, 204);
    color:white;
}
.bottom{
    width:100%;
    height: auto;
}
}
@media screen and (max-width:980px){
#Article-mobile{
    width:100%;
    height:auto;
    padding-top: 57px;
    
}
#Article-pc{
    display:none;
}
.mobile-top1{
    display: inline-block;
    width:100%;
    height: auto; 
    padding:50px 10px 50px 10px;
    font-size: 25px;
    font-family: 'KaiTi';
    line-height: 30px;
    border-bottom: 1px solid #e6e6e6;
}
.mobile-top2{
    display: inline-block;
    width:100%;
    height: auto; 
    padding:20px 10px 20px 10px;
    font-size: 15px;
    font-family: 'KaiTi';
    line-height: 20px;
    border-bottom: 1px solid #e6e6e6;
}
.mobile-top3{
    display: inline-block;
    width:100%;
    height: auto; 
    padding:10px 10px 10px 10px;
    font-size: 15px;
    font-family: 'KaiTi';
    line-height: 20px;
}
.mobile-top4{
    display: inline-block;
    width:100%;
    height: auto;
    margin-left:10px;  
    padding:10px 10px 10px 10px;
    font-family: 'KaiTi';
    line-height: 20px;
    border-left: 2px solid #e6e6e6;
}
.mobile-top5{
    display: inline-block;
    width:100%;
    height: auto; 
    padding:50px 10px 30px 10px;
    font-size: 25px;
    font-family: 'KaiTi';
    line-height: 30px;
}
.mobile-box1{
    display:block;
    width:100%;
    height:500px; 
    padding:20px 10px 40px 10px;
    font-family: 'KaiTi';
}
.mobile-box{
    width:100%;
    height: 500px;
    border:2px solid #e6e6e6;
}
.mobile-box .mobile-box-top{
    float: left;
    width:100%;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
     border-bottom: 3px solid #e6e6e6;
}
.mobile-box .mobile-box-mobile{
    float: left;
    width:100%;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
}
.mobile-btn{
    margin-right: 30px;
    background: rgb(101, 101, 151);
    color: white;
}
.mobile-box .mobile-box-bottom{
    text-align: center;
    font-size: 20px;
    line-height: 40px;
}
.mobile-img{
    width:100%;
    padding:40px 10px 40px 10px;
    height: 200px;
}
.mobile-img .mobile-img1{
    padding-left:35%;
}
.bottom{
    width:100%;
    height: auto;
}
}
</style>
